<template>
	<view>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback"
			height="100%" 
			:down="downOption"
			:top="mescrollTop"
			:up="upOption">
			<view class="lazyLoad-box">
				<lazyLoad 
					ref="lazyLoad" 
					class="lazyLoad" 
					v-for="(item,i) in image" 
					:key="i" 
					:width="200" 
					:height="200" 
					:image="item.img" 
					:radius="24" 
					:mode="'aspectFill'"
					>
				</lazyLoad>
			</view>
			<loadMore :status="loadStatus"></loadMore>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import lazyLoad from '@/components/lazy-load/lazy-load.vue'
	import loadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			lazyLoad,
			loadMore
		},
		data() {
			return {
				mescrollTop: 0,
				// 下拉刷新操作的时间，用于延迟下拉刷新
				downBeginTime: 0,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
					toTop:{
						bottom: '20upx'
					}
				},
				image:[],
				loadStatus:'more' // 加载
			}
		},
		onLoad() {
			this.loadStatus = 'loading'
			this.hotList()
		},
		// 上拉加载
		onReachBottom() {
			this.loadStatus = 'loading'
			this.hotList()
		},
		methods: {
			// 下拉刷新的回调
			downCallback(){
				this.image = []
				this.loadStatus = 'loading'
				this.hotList()
			},
			hotList(){
				this.$api.hotList().then((res)=>{
					const {result,info,data} = res.data
					if(result == 1){
						// this.image = data.clentList
						data.clentList.map((item)=>{
							this.image.push(item)
							
						})
						// this.image = [this.image,...data.clentList]
					}
				}).catch(()=>{
				}).finally(()=>{
					setTimeout(()=>{
						this.mescroll.endSuccess(1);
					},1000)
					this.loadStatus = 'noMore'
				})
			},
		
		}
		
	}
</script>

<style>
	page{
	}
	.lazyLoad {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin: 10rpx 0;
	}
	.lazyLoad-box{
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
	}
</style>
